<template>
  <gui-page ref="guiPage" :customHeader="true">
    <template v-slot:gHeader>
      <nav-bar-custom left-icon="left" :title="data.title">
      </nav-bar-custom>
    </template>
    <template v-slot:gBody>
      <view>
        <!-- 视频播放区域 -->
        <view>
          <image v-if="playIndex === null"
                 src="http://afl-private.oss-us-east-1.aliyuncs.com/afl-app/img/sop_default.jpg"
                 style="width:100%" mode="widthFix"></image>
          <video id="myVideo"
                 class="gui-course-video"
                 :src="fileList[playIndex].src"
                 :poster="fileList[playIndex].poster" controls v-else></video>
          <!-- <web-view :src="pdfUrl"></web-view> -->
        </view>
        <!-- 基础信息 -->
        <view class="gui-course-info gui-flex gui-row gui-nowrap gui-space-between gui-align-items-center"
              v-if="playIndex !== null" style=" background-color: #fff;">
          <view class="gui-course-info-body">
            <view class="gui-course-title">{{ fileList[playIndex].title }}</view>
            <view class="gui-flex gui-rows">
              <text class="gui-course-info-text gui-block">{{ $t('materials.duration') }} :
                {{ fileList[playIndex].timer }}
              </text>
              <text class="gui-course-info-text gui-block">{{ $t('materials.size') }} :
                {{ fileList[playIndex].viewnumber }}
              </text>
            </view>
          </view>
          <!-- <view class="gui-course-info-share"
                hover-class="gui-tap">
            <text class="gui-icons gui-h4 gui-color-gray gui-text-center gui-block"
                  style="line-height:50rpx;">&#xe606;
            </text>
            <text class="gui-text-small gui-color-gray gui-text-center gui-block">分享</text>
          </view> -->
        </view>
        <!-- <view class="gui-common-line"></view> -->
        <!-- 切换导航 -->
        <view class="gui-margin-top" style=" background-color: #fff;margin-bottom: 20rpx;padding:0 20rpx">
          <gui-switch-navigation
              :items="navs"
              lineHeight="60rpx"
              :isCenter="true"
              :currentIndex="navCurrentIndex"
              :size="160"
              textAlign="center"
              activeLineWidth="160rpx"
              activeLineHeight="5rpx"
              :margin="30"
              @change="navChange"></gui-switch-navigation>
        </view>
        <!-- 课程描述 -->
        <view class=" gui-margin-top"
              v-if="navCurrentIndex === 0">
          <view class="gui-padding gui-bg-white title-spec">
            <text class="line line-title"></text>
            <text
                class="gui-h4 gui-bold">{{ data.title }}
            </text>
          </view>
          <view
              class="gui-bg-white gui-dark-bg-level-3 gui-padding">
            <rich-text :nodes="data.detail"></rich-text>
          </view>
        </view>
        <!-- 课程目录 -->
        <view
            class="gui-list"
            v-if="navCurrentIndex === 1">
          <view
              class="gui-list-items card-b"
              v-for="(item, index) in fileList"
              :key="index"
              @tap="play(index)">
            <view class="gui-list-body gui-border-b ">
              <view class="gui-list-title header ">
                <text class="line"></text>
                <text
                    class="gui-list-title-text gui-primary-text gui-block header-title"
                    v-if="playIndex ===  index">{{$t('materials.play')}} {{ item.title }}
                </text>
                <text
                    class="gui-list-title-text gui-primary-text gui-block header-title"
                    v-else>{{ item.title }}
                </text>
              </view>
              <text class="gui-list-title-desc gui-color-gray gui-block">{{ $t('materials.duration') }}(mn) :
                {{ item.timer }}
                &nbsp; &nbsp;{{ $t('materials.size') }}：{{ item.viewnumber }}
              </text>
            </view>
          </view>
        </view>
        <view class="gui-list" v-if="navCurrentIndex === 2">
          <view class="gui-list-items card-b" v-for="(item,index) in fileListPdf" :key="index" @click="playPdf(item,index)">
            <view class="gui-list-body gui-border-b">
              <view class="gui-list-title header">
                <text class="line"></text>
                <text
                    class="gui-list-title-text gui-primary-text gui-block header-title"
                    v-if="playPDF ===  index">{{$t('materials.pdfPreviews')}} {{ item.title }}
                </text>
                <text
                    class="gui-list-title-text gui-primary-text gui-block header-title"
                    v-else>{{ item.title }}
                </text>
              </view>
              <text class="gui-list-title-desc gui-color-gray gui-block">
                {{ $t('materials.size') }}：{{ item.pdfSize }}
              </text>
            </view>
          </view>
        </view>
        <view class="gui-list" v-if="navCurrentIndex === 3">
          <view class="gui-list-items card-b" v-for="(item,index) in fileListImg" :key="index" @click="playImg(item,index)">
            <view class="gui-list-body gui-border-b">
              <view class="gui-list-title header">
                <text class="line"></text>
                <text
                    class="gui-list-title-text gui-primary-text gui-block header-title"
                    v-if="playPDF ===  index">{{$t('materials.pdfPreviews')}} {{ item.title }}
                </text>
                <text
                    class="gui-list-title-text gui-primary-text gui-block header-title"
                    v-else>{{ item.title }}
                </text>
              </view>
              <text class="gui-list-title-desc gui-color-gray gui-block">
                {{ $t('materials.size') }}：{{ item.pdfSize }}
              </text>
            </view>
          </view>
        </view>
      </view>
    </template>
  </gui-page>
</template>

<script setup>
import {onLoad} from "@dcloudio/uni-app"
import {reactive, ref} from 'vue'
import {navigate} from '@/utils/routerSkip.js';
import GuiSwitchNavigation from '@/Grace6/components/gui-switch-navigation.vue'
import NavBarCustom from '@/components/common/navBarCustom.vue'
import GuiPage from '@/Grace6/components/gui-page.vue'
import {getSopDetail, getSopFiles} from "@/api/api";
import parserHtml from "@/Grace6/js/parserHTML.js";
import GuiArticleInfo from "@/Grace6/components/gui-article-info.vue";
//JS国际化引入
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
// 模拟一个视频地址减少代码量实际开发请在下面的视频数据中使用视频真实地址
const vsrc = 'http://afl-private.oss-us-east-1.aliyuncs.com/afl-app/img/sop_default.jpg'

const data = reactive({
  src: 'blob:https://baike.baidu.com/0035e415-db3c-4cf8-9896-6b25a2e1cffe',
  detail: "",
  title: ""
})
const fileList = reactive([])
let uuids=reactive("")

function sizeTostr(size) {
  var data = "";
  if (size < 0.1 * 1024) { //如果小于0.1KB转化成B
    data = size.toFixed(2) + "B";
  } else if (size < 0.1 * 1024 * 1024) {//如果小于0.1MB转化成KB
    data = (size / 1024).toFixed(2) + "KB";
  } else if (size < 0.1 * 1024 * 1024 * 1024) { //如果小于0.1GB转化成MB
    data = (size / (1024 * 1024)).toFixed(2) + "MB";
  } else { //其他转化成GB
    data = (size / (1024 * 1024 * 1024)).toFixed(2) + "GB";
  }
  var sizestr = data + "";
  var len = sizestr.indexOf("\.");
  var dec = sizestr.substr(len + 1, 2);
  if (dec == "00") {//当小数点后为00时 去掉小数部分
    return sizestr.substring(0, len) + sizestr.substr(len + 3, 2);
  }
  return sizestr;
}


onLoad((option) => {
  const uuid = option.uuid
  uuids=option.uuid
  getSopDetail(uuid).then(res => {
    data.detail = parserHtml.parserHTML(res.data.description);
    data.title = res.data.title;
  })
  getSopFiles(uuid).then(res => {
    if (res.data.length) {
      res.data.forEach((item, index, arr) => {
        if (item.suffix === 'mp4') {
          fileList.push({
            title: item.name,
            poster: vsrc,
            src: item.url,
            timer: item.remark,
            viewnumber: sizeTostr(item.size)
          })
        }
        if (item.suffix === 'pdf') {
          fileListPdf.push({
            title: item.name,
            pdfSize: sizeTostr(item.size),
            src: item.url,
            poster: item.url,
          })
        }
        if (item.suffix === 'png'||item.suffix === 'jpg'||item.suffix === 'svg'||item.suffix === 'gif'||item.suffix === 'psd'||item.suffix === 'tif'||item.suffix === 'jpeg') {
          fileListImg.push({
            title: item.name,
            pdfSize: sizeTostr(item.size),
            src: item.url,
            poster: item.url,
            uuid:item.uuid
          })
        }
      })
    }
  })
})

let playIndex = ref(null)  //是否展示图片
let pdfUrl = ref(null)
let playPDF = ref(null)  //是否预览PDF
let playimg = ref(null)  //是否预览PDF
let navCurrentIndex = ref(0) //课程切换

const navs = reactive([{id: 0, name: t('materials.correlationDescription')}, {id: 1, name: t('materials.videoDirectory')}, {id: 2, name: t('materials.documentDirectory')},{id: 3, name: t('materials.imgPreview')}])

const fileListPdf = reactive([])

const fileListImg = reactive([])

const navChange = function (index) {
  navCurrentIndex.value = index
}

const play = function (index) {

  playIndex.value = index
  // uni.setNavigationBarTitle({title:this.fileList[this.playIndex].title});
  uni.pageScrollTo({
    scrollTop: 0
  })
}

const playPdf = function (x,y) {
  playPDF.value=y;
  navigate({
    url: `/pages/sopPage/pdfPreview?url=${x.poster}&title=${x.title}`
  })
}

const playImg = function (x,y) {
  playimg.value=y;
  navigate({
    url: "/pages/sopPage/imgView?uuid=" + uuids
  })
}
</script>

<style scoped lang="scss">
.gui-course-video {
  width: 750rpx;
}

.gui-course-info {
  padding: 20rpx 25rpx;
}

.gui-course-info-body {
  width: 200rpx;
  flex: 1;
}

.gui-course-info-share {
  width: 100rpx;
}
.title-spec{
  display: flex;
  flex-direction: row;
  padding: 30rpx 30rpx 0 30rpx;
}
.line-title{
  margin-top: 12rpx;
}

.gui-course-title {
  font-size: 32rpx;
  line-height: 50rpx;
  color: #333333;
}

.gui-course-info-text {
  font-size: 22rpx;
  line-height: 38rpx;
  margin-right: 30rpx;
  margin-top: 8rpx;
}
.card-b{
  background-color: #fff;
  margin-bottom: 20rpx;
}
.header{
  display: flex;
  flex-direction: row;
  margin-bottom: 10rpx;
}
.line {
  width: 6rpx;
  height: 30rpx;
  background: #37886C;
  margin-right: 14rpx;
}

.header-title {
  flex: 1;
}
</style>

